<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="renderer" content="webkit">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>[简历] 马梓杰-广州南方学院 / 广州</title>
    <link rel="shortcut icon" href="assets/images/shortcut icon.png" type="image/x-png">
    <link rel="stylesheet" href="assets/css/typo.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/index.css">
    <script>
        function loading() {
            document.getElementsByClassName('avatar')[0].style.display = 'block';
            document.getElementsByClassName('loading')[0].style.display = 'none';
        }
    </script>
</head>

<body>

    <header class="header"></header>

    <article class="container">
        <section class="side" id="side">

            <!-- 左栏固定开关，记得及时删除这段代码 Start-->
            <label class="switch" style="display: none;" onchange="switchFixed()">
                <script type="text/javaScript">
                    function switchFixed(){
                        var value = document.getElementById('side').style.position === 'fixed' ? 'absolute' : 'fixed';
                        document.getElementById('side').style.position = value;
                    }
                </script>
                <input id="cb" type="checkbox">
                <span class="slider round"></span>
            </label>
            <style>
                @media (min-width: 750px) {
                    .switch {
                        position: relative;
                        display: inline-block !important;
                        width: 60px;
                        height: 34px;
                    }

                    .switch input {
                        display: none;
                    }

                    .slider {
                        position: absolute;
                        cursor: pointer;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background-color: #ccc;
                        -webkit-transition: .4s;
                        transition: .4s;
                    }

                    .slider:before {
                        position: absolute;
                        content: "";
                        height: 26px;
                        width: 26px;
                        left: 4px;
                        bottom: 4px;
                        background-color: white;
                        -webkit-transition: .4s;
                        transition: .4s;
                    }

                    input:checked+.slider {
                        background-color: #1abc9c;
                    }

                    input:focus+.slider {
                        box-shadow: 0 0 1px #1abc9c;
                    }

                    input:checked+.slider:before {
                        -webkit-transform: translateX(26px);
                        -ms-transform: translateX(26px);
                        transform: translateX(26px);
                    }

                    .slider.round {
                        border-radius: 34px;
                    }

                    .slider.round:before {
                        border-radius: 50%;
                    }
                }
            </style>
            <!-- 左侧固定开关，记得及时删除这段代码 End-->

            <!-- 个人肖像 -->
            <section class="me">
                <section class="portrait">
                    <div class="loading">
                    </div>
                    <!-- 头像照片 -->
                    <figure>
                        <img class="avatar" src="assets/images/head portrait.png" alt="png"
                            style="display: flex; max-width:  100%;">
                    </figure>
                </section>

                <h1 class="name">马梓杰</h1>
                <h4 class="info-job">广州南方学院在校生 / 广州</h4>

            </section>

            <!-- 基本信息 -->
            <address class="profile info-unit">
                <h2>
                    <i class="fa fa-user" aria-hidden="true"></i>基本信息
                </h2>
                <hr />
                <ul>
                    <li>
                        <label>个人信息</label>
                        <span>马梓杰 / 男 / 19岁</span>
                    </li>
                    <li>
                        <label>英语水平</label>
                        <span>未考级</span>
                    </li>
                    <li>
                        <label>计算机水平</label>
                        <span>未考级</span>
                    </li>
                </ul>
            </address>

            <!-- 联系方式 -->
            <address class="contact info-unit">
                <h2>
                    <i class="fa fa-phone" aria-hidden="true"></i>联系方式
                </h2>
                <hr />
                <ul>
                    <li>
                        <label>手机</label>
                        <a href="tel:19867625275" target="_blank">198-6762-5275</a>
                    </li>
                    <li>
                        <label>邮箱</label>
                        <a href="mzj12138@foxmail.com" target="_blank">mzj12138@foxmail.com</a>
                    </li>
                    <li>
                        <label>个人主页</label>
                        <a href="https://gitee.com/eight-seven" target="_blank">gitee.com/eight-seven/</a>
                    </li>
                    <li>
                        <label>Github</label>
                        <a href="https://github.com/8kuai7" target="_blank">github.com/8kuai7</a>
                    </li>
                    <li>
                        <label>bilibili主页</label>
                        <a href="https://space.bilibili.com/1461140977" target="_blank">8块8的瞎玩屋</a>
                    </li>

                </ul>
            </address>

            <!-- 技能点 -->
            <section class="skill info-unit">
                <h2>
                    <i class="fa fa-code" aria-hidden="true"></i>技能点
                </h2>
                <hr />
                <ul>
                    <li>
                        <label>HTML</label>
                        <progress value="40" max="100"></progress>
                    </li>
                    <li>
                        <label>CSS</label>
                        <progress value="40" max="100"></progress>
                    </li>
                    <li>
                        <label>JavaScript</label>
                        <progress value="0" max="100"></progress>
                    </li>
                    <li>
                        <label>React</label>
                        <progress value="0" max="100"></progress>
                    </li>
                    <li>
                        <label>Node.js</label>
                        <progress value="0" max="100"></progress>
                    </li>
                    <li>
                        <label>小程序</label>
                        <progress value="0" max="100"></progress>
                    </li>
                </ul>
            </section>

            <section class="qrcode info-unit">
                <h2><i class="fa fa-qrcode" aria-hidden="true"></i>二维码</h2>
                <hr />
                <figure>
                    <img src="./assets/images/Wechat Avatar.jpg" style="width: 100%;" alt="Wechat Avatar">
                </figure>
            </section>

            <!-- 技术栈 -->
            <!-- <div class="stack info-unit">
                    <h2><i class="fa fa-code" aria-hidden="true"></i>其他</h2>
                    <hr/>
                    <ul>
                        <li>
                            <label>前端</label>
                            <span>React、jQuery、微信小程序、Bootstrap、SASS、LESS</span>
                        </li>
                        <li>
                            <label>后端</label>
                            <span>Node.js、MySQL、MongoDB、WordPress、ThinkPHP</span>
                        </li>
                        <li>
                            <label>其他</label>
                            <span>Git、SVN、Markdown</span>
                        </li>
                    </ul>
                </div> -->
        </section>
        <main>
            <section class="main">
                <!-- 教育经历 -->
                <section class="edu info-unit">
                    <h2>
                        <i class="fa fa-graduation-cap" aria-hidden="true"></i>教育经历
                    </h2>
                    <hr />
                    <ul>
                        <li>
                            <h3>
                                <span>广州南方学院 - 网络与新媒体专业（本科）</span>
                                <time>2021.9-至今</time>
                            </h3>
                            <p>专业排名
                                <mark>暂无</mark>军训期间，于<time>2021年9月</time>获得“军训之星”称号
                            </p>
                        </li>
                        <li>
                            <h3>
                                <span>化州市第一中学 - 物生地学科（高中）</span>
                                <time>2018.9-2021.7</time>
                            </h3>
                            <p>
                                期间担任学校文学社 - 榕芽文学社干事</p>
                        </li>
                    </ul>
                </section>

                <!-- 工作经历 -->
                <section class="work info-unit">
                    <h2>
                        <i class="fa fa-shopping-bag" aria-hidden="true"></i>工作经历
                    </h2>
                    <hr />
                    <ul>
                        <li>
                            <h3>
                                <span><em>[经历1]</em>广州南方学院校记者团 —— 成员</span>
                                <time>2021.10 至 至今</time>
                            </h3>
                            <details>
                                <ul class="info-content">
                                    <li>深度参与“南苑美食”项目，<b>独立承担</b>并完成相关推文的排版任务。
                                    </li>
                                </ul>
                            </details>
                        </li>
                        <li>
                            <h3>
                                <span><em>[经历2]</em>化州市第一中学榕芽文学社 —— 干事</span>
                                <time>2018.10-2019.7</time>
                            </h3>
                            <details>
                                <ul class="info-content">
                                    <li>深度参与举办社团校运会活动、文学社校刊制作、文学社“新绿杯”现场作文大赛等。
                                        <a href="https://baike.baidu.com/item/%E5%8C%96%E5%B7%9E%E5%B8%82%E7%AC%AC%E4%B8%80%E4%B8%AD%E5%AD%A6/6455169?fr=aladdin"
                                            target="_blank">
                                            <i class="fa fa-link" aria-hidden="true"></i>化州市第一中学 — 百度百科</a>
                                    </li>
                                    <li>主要参与活动策划、举办社团课外活动、开设社团教学课等
                                        主要负责<mark>策划案、PPT、筹备主题</mark>等方面的工作。</li>
                                </ul>
                            </details>
                        </li>
                    </ul>
                </section>

                <!-- 项目经验 -->
                <section class="project info-unit">
                    <h2>
                        <i class="fa fa-terminal" aria-hidden="true"></i>个人项目
                    </h2>
                    <hr />
                    <ul>
                        <li>
                            <h3>
                                <span><em>[项目1]</em>医学科学数据管理与共享平台</span>
                                <span class="link">
                                    <a href="#" target="_blank">Demo</a>
                                </span>
                                <time>201X.X-201X.X</time>
                            </h3>
                            <ul class="info-content">
                                <li>技术栈：ThinkPHP+MongoDB+Axure</li>
                                <li>
                                    <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
                                    <b>[目标]</b>实现多类型多来源医学科学数据的提交、管理和共享
                                    <br />
                                    <i class="fa fa-users" aria-hidden="true"></i>
                                    <b>[团队]</b>同 2 位同专业同学一起
                                    <br />
                                    <i class="fa fa-bars" aria-hidden="true"></i>
                                    <b>[贡献]</b>完成从
                                    <mark>“调研-设计-实现-文档”</mark>等工作，主要负责系统原型、功能框架及数据提交流程、元数据及源数据的管理与共享方案的设计以及系统开发等工作
                                    <br />
                                    <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                                    <b>[效果]</b>作品最终取得第三届共享杯国家级竞赛“一等奖” （2/2000）
                                </li>
                            </ul>
                        </li>
                        <li>
                            <h3>
                                <span><em>[项目2]</em>肿瘤流行病数据可视化</span>
                                <span class="link">
                                    <a href="#" target="_blank">Demo</a>
                                </span>
                                <time>201X.X-201X.X</time>
                            </h3>
                            <ul class="info-content">
                                <li>技术栈：HTML 5+D3.js+ECharts+MySQL</li>
                                <li>
                                    <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
                                    <b>[目标]</b>实现常见肿瘤流行病数据多维度可视化展示、数据透视及分析
                                    <br />
                                    <i class="fa fa-users" aria-hidden="true"></i>
                                    <b>[团队]</b>与 1 位同学
                                    <br />
                                    <i class="fa fa-bars" aria-hidden="true"></i>
                                    <b>[贡献]</b>分析项目需求，清洗并整理相关数据(扩展第三方知识组织系统和 Google trends 数据)，并用
                                    <mark>D3.js</mark> 和
                                    <mark>ECharts</mark> 进行图形化展示以及实现简易自动分析 功能
                                    <br />
                                    <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                                    <b>[效果]</b>作品取得第二届共享杯国家级竞赛“特等奖”(1/1500)
                                </li>
                            </ul>
                        </li>
                        <li>
                            <h3>
                                <span><em>[项目3]</em>肿瘤流行病数据可视化</span>
                                <span class="link">
                                    <a href="#" target="_blank">Demo</a>
                                </span>
                                <time>201X.X-201X.X</time>
                            </h3>
                            <ul class="info-content">
                                <li>技术栈：HTML 5+D3.js+ECharts+MySQL</li>
                                <li>
                                    <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
                                    <b>[目标]</b>实现常见肿瘤流行病数据多维度可视化展示、数据透视及分析
                                    <br />
                                    <i class="fa fa-users" aria-hidden="true"></i>
                                    <b>[团队]</b>与 1 位同学
                                    <br />
                                    <i class="fa fa-bars" aria-hidden="true"></i>
                                    <b>[贡献]</b>分析项目需求，清洗并整理相关数据(扩展第三方知识组织系统和 Google trends 数据)，并用
                                    <mark>D3.js</mark> 和
                                    <mark>ECharts</mark> 进行图形化展示以及实现简易自动分析功能
                                    <br />
                                    <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                                    <b>[效果]</b>作品取得第二届共享杯国家级竞赛“特等奖”(1/1500)
                                </li>
                            </ul>
                        </li>
                        <li>
                            <h3>
                                <span><em>[项目4]</em>肿瘤流行病数据可视化</span>
                                <span class="link">
                                    <a href="#" target="_blank">Demo</a>
                                </span>
                                <time>201X.X-201X.X</time>
                            </h3>
                            <ul class="info-content">
                                <li>技术栈：HTML 5+D3.js+ECharts+MySQL</li>
                                <li>
                                    <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
                                    <b>[目标]</b>实现常见肿瘤流行病数据多维度可视化展示、数据透视及分析
                                    <br />
                                    <i class="fa fa-users" aria-hidden="true"></i>
                                    <b>[团队]</b>与 1 位
                                    <br />
                                    <i class="fa fa-bars" aria-hidden="true"></i>
                                    <b>[贡献]</b>分析项目需求，清洗并整理相关数据(扩展第三方知识组织系统和 Google trends 数据)，并用
                                    <mark>D3.js</mark> 和
                                    <mark>ECharts</mark> 进行图形化展示以及实现简易自动分析 功能
                                    <br />
                                    <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                                    <b>[效果]</b>作品取得第二届共享杯国家级竞赛“特等奖”(1/1500)
                                </li>
                            </ul>
                        </li>

                    </ul>
                </section>
            </section>
            <section class="work info-unit" style="margin: 20px;">
                <!-- 自我评价 -->
                <section class="work info-unit">
                    <h2>
                        <i class="fa fa-pencil" aria-hidden="true"></i>自我评价/期望
                    </h2>
                    <hr />
                    <p>我是一个对理想有着执着追求，不甘平凡的人，为人诚实，吃苦耐劳，热情稳重，自信但不自负，勤奋而负有责任感，有亲和力及较强的沟通表达能力，并有良好的团队合作精神；
                        <span
                            class="mark-txt">“我独立于这个世界，也与千万人相连。不忘自己从哪来，才能找到自己的位置。”</span>这是我送给自己的一段话，时刻提醒自己，不要忘了保留对这个世界的那份热爱。我不奢望每天都活得快乐，但我期望我每天都活得通透。
                    </p>
                </section>

            </section>

    </article>
    </main>



    <footer class="footer">

        <p><em>© 2020 马梓杰.文档最后更新时间为</em>
            <time>2021年06月20日</time>.
        </p>
    </footer>

    <!-- 侧栏 -->
    <aside>
        <ul>
            <li>
                <a href="https://gitee.com/eight-seven/interim-project.git" target="_blank">源代码</a>
            </li>
            <li>
                <a href="http://if2er.com/" target="_blank">Blog</a>
            </li>
        </ul>
    </aside>

    <script src="./assets/js/index.js"></script>
</body>

</html>